<template>
  <div id="container">
    <div id="head">{{ project_name || 'CSINGO / SATIS' }}</div>
    <div id="list">
      <div id="detail">
        <!--头部搜索框和操作按钮-->
        <el-row style="padding: 10px; border-radius: 10px;">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-input placeholder="输入关键字搜索" v-model="search" size="mini" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light" style="float: right; padding: 0 20px">
              <!--添加分类对话框-->
              <CreateInclude/>
              <!--添加包对话框-->
              <CreatePackage :includes-data="includesData"/>
            </div>
          </el-col>
        </el-row>
        <!--分类列表-->
        <el-table :data="includesData" :show-header="false" style="width: 100%;border-top: lightsteelblue 1px solid;" height="calc(100% - 35px)">
          <el-table-column type="expand">
            <!--包列表-->
            <template slot-scope="rows">
              <SatisPackages :include_id="rows.row.id"/>
            </template>
          </el-table-column>
          <el-table-column label="分类" prop="name"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import SatisPackages from "@/components/SatisPackages";
import CreateInclude from "@/components/CreateInclude";
import CreatePackage from "@/components/CreatePackage";

export default {
  name: "SatisIncludes",
  components: {
    SatisPackages: SatisPackages,
    CreateInclude: CreateInclude,
    CreatePackage: CreatePackage,
  },
  data() {
    return {
      search: "",
      project_name: "",
      includesData: [],
    }
  },
  methods: {
    GetIncludes() {
      axios({
        url: '/collector/includes/all',
        method: 'post'
      }).then(({data}) => {
        this.includesData = data.data.data
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: err.message,
          type: 'error'
        })
      })
    },
    GetName() {
      axios({
        url: '/collector/common/project-name',
        method: 'post'
      }).then(({data}) => {
        this.project_name = data.data
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: err.message,
          type: 'error'
        })
      })
    },
  },
  mounted() {
    this.GetName()
    this.GetIncludes()
  }
}
</script>

<style>
#container {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}

#head {
  height: 80px;
  padding: 10px 0;
  color: lightsteelblue;
  font-weight: bolder;
  font-size: x-large;
  line-height: 80px;
}

#list {
  height: calc(100% - 140px);
  background-color: lightsteelblue;
  padding: 20px;
}

#detail {
  height: 100%;
  background-color: white;
}

.el-table {
  border-radius: 10px;
  border: black 1px;
}

.el-table__body-wrapper {
  overflow-y: auto !important;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 90%;
}

.version-btn {
  margin: 0 10px 0 0 !important;
}
</style>